<template>
    <div class="box">
        <div class="top">
            <h1>修改密码</h1>
        </div>
        <div class="content">
            <!-- 修改 ref 为 formRef -->
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="原密码" prop="oldPwd">
                    <el-input v-model="form.oldPwd" style="height: 40px;" type="password"
                        placeholder="请输入原密码" @blur="checkPwd"></el-input>
                </el-form-item>

                <el-form-item label="新密码" prop="newPwd">
                    <el-input v-model="form.newPwd" style="height: 40px;" type="password"
                        placeholder="请输入新密码"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="newPwd1">
                    <el-input v-model="form.newPwd1" style="height: 40px;" type="password"
                        placeholder="请再次输入新密码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">立即修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { editPwd } from '../api/account';
import {checkOldpwd} from '../api/account'
import { useRouter } from 'vue-router';
const router = useRouter();

// 修改引用名称为 formRef
const formRef = ref(null);
const user = JSON.parse(sessionStorage.getItem('user'));
const userInfo = ref(user);
console.log(userInfo.value);

const form = reactive({
    oldPwd: '',
    newPwd: '',
    newPwd1: '',
    id:userInfo.value.id
});

// 定义验证规则
const rules = {
    oldPwd: [
        { required: true, message: '请输入原密码', trigger: 'blur' }
    ],
    newPwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' }
    ],
    newPwd1: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' }
    ]
};

// 处理旧密码框失去焦点事件
const checkPwd = async () => {
    console.log(form.oldPwd);
    let { code, msg } = await checkOldpwd({ oldPwd: form.oldPwd, id: userInfo.value.id })
    if (code == 0) {
        ElMessage.success(msg);
    }else{
        ElMessage.error(msg);
    }
}

// 提交表单
const submitForm = () => {
    if (!form.oldPwd) {
        ElMessage.error('请输入原密码');
        return;
    }
    if (!form.newPwd) {
        ElMessage.error('请输入新密码');
        return;
    }
    if (!form.newPwd1) {
        ElMessage.error('请再次输入新密码');
        return;
    }
    if (form.newPwd !== form.newPwd1) {
        ElMessage.error('两次输入的新密码不一致');
        return;
    }
    formRef.value.validate(async (valid) => {
        if (valid) {
            editPwd(form).then(res => {
                if (res.code == 0) {
                    ElMessage.success(res.msg);
                    sessionStorage.removeItem('user')
                    router.push('/')
                }
                else {
                    ElMessage.error(res.msg);
                    return false;
                }
            })
        }
    })
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
}

.top {
    width: 100%;
    height: 6%;
    font-size: 18px;
    border-bottom: 1px solid #888787;
}

.top h1 {
    margin-left: 20px;
    line-height: 40px;
}

.content {
    width: 98%;
    height: 300px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
</style>